<template>
  <div>
    <TopNav2 title="最火话题"/>
    <div class="main">
      <router-link to="/find">
        <img  class="top-pic" :src="imgUrl" alt="">
      </router-link>
      <div class="title">
        <h1>话题排行榜</h1>
        <img :src="imgUrl1" alt="" class="heart1">
        <img :src="imgUrl1" alt="" class="heart2">
      </div>
      <router-link to="/">
        <Product :productList="productList"/> 
      </router-link>
    </div>
    
  </div>
</template>

<script>
import TopNav2 from "../components/TopNav2"
import Product from '../components/HotProduct/Product.vue'
export default {
  name:"HotTopic",
  data() {
    return {
      imgUrl: require("../assets/hot-topic/hot-topic_01.png"),
      imgUrl1: require("../assets/hot-product/hot-topic_02.png"),
      productList:[]
    }
  },
  mounted() {
    var that = this;
    var flag = true;
    this.$axios.get("http://localhost:3000/api/hotTopic?count=4")
    .then(res => {
      console.log(res.data);
      this.productList = res.data;
      
    })
    .catch(error => {
      console.log(new error(error))
    })
     window.addEventListener("scroll",function(){
      // console.log(document.documentElement.scrollTop);
      if(document.documentElement.scrollTop + window.innerHeight >= document.body.offsetHeight){
        if(flag==true){
          flag = false;
          that.$axios.get("http://localhost:3000/api/hotTopic?count=4")
          .then(res => {
            // console.log(res.data);
            that.productList = that.productList.concat(res.data);
            flag = true;
          })
          .catch(error => {
            console.log(new error(error))
          });
        }
      }
    })
  },
  components:{
    TopNav2,
    Product
  }
}
</script>

<style scoped>
  .main{
      position: absolute;
      left: 0;
      top: 2.267rem;
    }
  .top-pic{
    width: 9.466rem;
    height: 4rem;
    border-radius: 0.134rem;
    margin-left: 0.267rem;
    box-shadow: 0.053rem -0.267rem 1.067rem rgba(0,0,0,0.2);
    }
  .title{
    margin-top: 0.4rem;
  }
  h1{
    width: 100%;
    text-align: center;
    font-size: 0.4rem;
    font-weight: normal;
    margin-top: 0.32rem;
    color: #808080;
    margin-bottom: -0.267rem;
    float: left;
  }
  .heart1{
    width: 0.180rem;
    float: left;
    position: relative;
    left: 3.467rem;
    top: -0.08rem;
  }
  .heart2{
    position: relative; 
    width: 0.183rem;
    left: 6.19rem;
    top: -0.213rem;
  }
</style>
